<script setup>
/**
 * @license
 * Copyright 2022 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

/**
 * @fileoverview Main Vue component that includes the Blockly component.
 * @author dcoodien@google.com (Dylan Coodien)
 */

import { ref } from 'vue'
import BlocklyComponent from './BlocklyComponent.vue'

import './stocks'

import { javascriptGenerator } from 'blockly/javascript'

const foo = ref()
const code = ref()
const options = {
  media: 'media/',
  grid: {
    spacing: 25,
    length: 3,
    colour: '#ccc',
    snap: true
  },
  toolbox: `<xml>
          <category name="Logic" colour="%{BKY_LOGIC_HUE}">
            <block type="controls_if"></block>
            <block type="logic_compare"></block>
            <block type="logic_operation"></block>
            <block type="logic_negate"></block>
            <block type="logic_boolean"></block>
          </category>
          <category name="Functions" colour="%{BKY_LOGIC_HUE}">
            <!-- 添加 function 块 -->
            <block type="procedures_defnoreturn"></block>
            <block type="procedures_defreturn"></block>
            <block type="procedures_callnoreturn"></block>
            <block type="procedures_callreturn"></block>
          </category>
          <category name="函数" custom="PROCEDURE" colour="#FF7400"></category>
          <category name="Loops" colour="%{BKY_LOOPS_HUE}">
            <block type="controls_repeat_ext">
              <value name="TIMES">
                <block type="math_number">
                  <field name="NUM">10</field>
                </block>
              </value>
            </block>
            <block type="controls_whileUntil"></block>
          </category>
          <category name="Math" colour="%{BKY_MATH_HUE}">
            <block type="math_number">
              <field name="NUM">123</field>
            </block>
            <block type="math_arithmetic"></block>
            <block type="math_single"></block>
          </category>
          <category name="Text" colour="%{BKY_TEXTS_HUE}">
            <block type="text"></block>
            <block type="text_length"></block>
            <block type="text_print"></block>
          </category>
          <category name="Variables" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}">
            </category>
          <category name="Stocks" colour="%{BKY_LOOPS_HUE}">
            <block type="stock_buy_simple"></block>
            <block type="stock_buy_prog"></block>
            <block type="stock_fetch_price"></block>
            <block type="serial_number_editor"></block>
          </category>
        </xml>`
}

const showCode = (code, workspace) => (
code.value = javascriptGenerator.workspaceToCode(foo.value.workspace)
  )



// 生成 JavaScript 代码
function generateCode() {
  var codefun = javascriptGenerator.workspaceToCode(foo.value.workspace);
  console.log(codefun);
  // 可以在这里执行生成的代码
  code.value= eval(codefun);
}

function editSerialNumber(serialNumber, prefix, suffix) {
  return prefix + serialNumber + suffix
}

// 示例：手动触发代码生成
// generateCode();
</script>

<template>
  <!--  <BlocklyComponent id="blockly1">-->
  <!--    <block type="controls_ifelse" />-->
  <!--    <block type="logic_compare" />-->
  <!--    <block type="logic_operation" />-->
  <!--    <block type="controls_repeat_ext">-->
  <!--      <value name="TIMES">-->
  <!--        <shadow type="math_number">-->
  <!--          <field name="NUM">10</field>-->
  <!--        </shadow>-->
  <!--      </value>-->
  <!--    </block>-->
  <!--    <block type="logic_operation" />-->
  <!--    <block type="logic_negate" />-->
  <!--    <block type="logic_boolean" />-->
  <!--    <block type="logic_null" disabled="true" />-->
  <!--    <block type="logic_ternary" />-->
  <!--    <block type="text_charAt">-->
  <!--      <value name="VALUE">-->
  <!--        <block type="variables_get">-->
  <!--          <field name="VAR">text</field>-->
  <!--        </block>-->
  <!--      </value>-->
  <!--    </block>-->
  <!--  </BlocklyComponent>-->

  <BlocklyComponent id="blockly2" :options="options" ref="foo" />
  <div id="code">
    <button v-on:click="generateCode">Show JavaScript</button>
    <pre v-html="code"></pre>
  </div>
</template>

<style lang="scss" scoped>
#code {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 50%;
  margin: 0;
  background-color: beige;
}
</style>
